<template>
	<view class="profile-page">
		<!-- 顶部背景和用户信息 -->
		<view class="profile-header">
			<view class="profile-top-bar">
				<text class="back-arrow" @click="goBack">＜</text>
				<text class="profile-title">个人中心</text>
				<view class="profile-actions">
					<text class="dot">•••</text>
					<text class="camera-icon">◎</text>
				</view>
			</view>
			<view class="profile-info">
				<image class="avatar" :src="avatarUrl" mode="aspectFill" @click="goToUserInfo" />
				<view class="user-info">
					<text class="user-name">{{ userName }}</text>
					<text class="user-phone">{{ userPhone }}</text>
				</view>
			</view>
		</view>

		<!-- 我的优惠券 -->
		<view class="coupon-section" @click="goToCoupon">
			<view class="coupon-left">
				<image class="coupon-icon" :src="getImageUrl('彩色-优惠券@2x.png')" mode="aspectFit" />
				<text>我的优惠券</text>
			</view>
			<view class="coupon-right">
				<text>3张</text>
				<text class="arrow">＞</text>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="order-section">
			<view class="order-header">
				<text>我的订单</text>
				<view class="all-orders" @click="goToOrderList('all')">
					<text>全部订单</text>
					<text class="arrow">＞</text>
				</view>
			</view>
			<view class="order-status-list">
				<view class="order-status-item wait-pay" @click="goToOrderList('pending')">
					<text>待支付</text>
				</view>
				<view class="order-status-item wait-use" @click="goToOrderList('toUse')">
					<text>待使用</text>
				</view>
				<view class="order-status-item wait-comment" @click="goToOrderList('toComment')">
					<text>待评价</text>
				</view>
			</view>
		</view>

		<!-- 我的服务 -->
		<view class="service-section">
			<text class="service-title">我的服务</text>
			<view class="service-title-divider"></view>
			<view class="service-list">
				<view class="service-item" @click="goToService('coupon')">
					<image :src="getImageUrl('组 9@2x(3).png')" mode="aspectFit" />
					<text>领券中心</text>
				</view>
				<view class="service-item" @click="goToService('invite')">
					<image :src="getImageUrl('组 9@2x(4).png')" mode="aspectFit" />
					<text>邀请好友</text>
				</view>
				<view class="service-item" @click="goToService('car')">
					<image :src="getImageUrl('组 9@2x(5).png')" mode="aspectFit" />
					<text>我的车辆</text>
				</view>
				<view class="service-item" @click="goToService('record')">
					<image :src="getImageUrl('组 9@2x(6).png')" mode="aspectFit" />
					<text>消费记录</text>
				</view>
				<view class="service-item" @click="goToService('repair')">
					<image :src="getImageUrl('组 9@2x(7).png')" mode="aspectFit" />
					<text>我的维修</text>
				</view>
				<view class="service-item" @click="goToService('feedback')">
					<image :src="getImageUrl('组 9@2x(8).png')" mode="aspectFit" />
					<text>意见反馈</text>
				</view>
				<view class="service-item" @click="goToService('address')">
					<image :src="getImageUrl('组 9@2x(9).png')" mode="aspectFit" />
					<text>收货地址</text>
				</view>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn" @click="handleLogout">
			<text>退出登录</text>
		</view>

		<!-- 底部导航 -->
		<view class="tabbar">
			<view class="tabbar-item" @click="goToHome">
				<image :src="getImageUrl('首页@2x.png')" mode="aspectFit" />
				<text>首页</text>
			</view>
			<view class="tabbar-warning" @click="goToWarning">
				<image :src="getImageUrl('示警@2x.png')" class="warning-icon" mode="aspectFit" />
			</view>
			<view class="tabbar-item active">
				<image :src="getImageUrl('我的-我的@2x.png')" mode="aspectFit" />
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import request from '../../untils/request';
	import baseUrl from '../../untils/urlConfig';
		
	const userInfo = ref(null);
	const userName = ref('');
	const userPhone = ref('');
	
	const fetchUserInfo = () => {
		const storedUserInfo = uni.getStorageSync('userInfo');
		console.log(userInfo)
		if (storedUserInfo) {
			userInfo.value = storedUserInfo;
			userName.value = storedUserInfo.nickName
			userPhone.value = storedUserInfo.phone
			console.log('获取到的用户信息:', storedUserInfo);
		}
	}
	
	onMounted(() => {
		fetchUserInfo();
	});
	
	// 默认头像
	const avatarUrl = ref('../../static/default-avatar.png');
	
	// 跳转到个人信息页面
	function goToUserInfo() {
		uni.navigateTo({
			url: '/pages/lsa-mexx/lsa-mexx',
			fail: (err) => {
				console.error('页面跳转失败：', err);
				uni.showToast({
					title: '页面跳转失败',
					icon: 'none'
				});
			}
		});
	}
	
	// 获取图片URL
	function getImageUrl(name) {
		// #ifdef H5
		return `/static/${name}`;
		// #endif
		
		// #ifdef MP-WEIXIN
		return `../../static/${name}`;
		// #endif
	}
	
	// 返回上一页
	function goBack() {
		uni.navigateBack({
			delta: 1,
			fail: () => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		});
	}
	
	// 跳转到优惠券页面
	function goToCoupon() {
		uni.navigateTo({
			url: '/pages/coupon/coupon'
		});
	}
	
	// 跳转到订单列表页面并传递类型参数
	function goToOrderList(type) {
		uni.navigateTo({
			url: `/pages/lsa-wddd/lsa-wddd?type=${type}`
		});
		
	}
	
	// 跳转到服务页面
	function goToService(type) {
		const routes = {
			coupon: '/pages/lingqu/lingqu',
			invite: '/pages/invite/invite',
			car: '/pages/car/car',
			record: '/pages/record/record',
			repair: '/pages/repair/repair',
			feedback: '/pages/feedback/feedback',
			address: '/pages/address/address'
		};
		
		if (routes[type]) {
			uni.navigateTo({
				url: routes[type],
				fail: (err) => {
					console.error('页面跳转失败：', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		}
	}
	
	// 退出登录
	function handleLogout() {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					uni.clearStorageSync();
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			}
		});
	}
	
	// 跳转到首页
	function goToHome() {
		uni.switchTab({
			url: '/pages/index/index',
			fail: () => {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		});
	}
	
	// 跳转到示警页面
	function goToWarning() {
		uni.navigateTo({
			url: '/pages/warning/warning'
		});
	}
</script>

<style>
.profile-page {
	background: #f8f8f8;
	min-height: 100vh;
}
.profile-header {
	background: linear-gradient(135deg, #2d8cf0 60%, #5bc0eb 100%);
	padding-bottom: 40rpx;
	position: relative;
}
.profile-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 30rpx 0 30rpx;
	color: #fff;
}
.profile-title {
	font-size: 36rpx;
	font-weight: bold;
}
.profile-actions {
	display: flex;
	align-items: center;
	gap: 20rpx;
}
.profile-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20rpx;
}
.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 4rpx solid #fff;
}
.user-info {
	margin-top: 10rpx;
	color: #fff;
	text-align: center;
}
.user-name {
	font-size: 32rpx;
	font-weight: bold;
}
.user-phone {
	font-size: 26rpx;
	opacity: 0.8;
}
.coupon-section {
	background: #fff;
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}
.coupon-left {
	display: flex;
	align-items: center;
	gap: 10rpx;
}
.coupon-icon {
	width: 40rpx;
	height: 40rpx;
}
.coupon-right {
	display: flex;
	align-items: center;
	gap: 10rpx;
	color: #888;
}
.order-section {
	background: #fff;
	margin: 0 30rpx 20rpx 30rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}
.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}
.all-orders {
	display: flex;
	align-items: center;
	color: #888;
	gap: 5rpx;
}
.order-status-list {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.order-status-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: #fff;
}
.wait-pay {
	background: #2d8cf0;
}
.wait-use {
	background: #ff8c1a;
}
.wait-comment {
	background: #1ad8ff;
}
.service-section {
	background: #fff;
	margin: 0 30rpx 20rpx 30rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}
.service-title {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.service-title-divider {
	height: 2rpx;
	background: #eee;
	margin: 16rpx 0 20rpx 0;
	width: 100%;
	border: none;
}
.service-list {
	display: flex;
	flex-wrap: wrap;
	gap: 30rpx 0;
}
.service-item {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;
}
.service-item image {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}
.logout-btn {
	margin: 40rpx 30rpx;
	background: #eee;
	border-radius: 40rpx;
	text-align: center;
	padding: 24rpx 0;
	color: #bbb;
	font-size: 30rpx;
}
.tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 120rpx;
	box-shadow: 0 -2rpx 8rpx #eee;
}
.tabbar-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #888;
	font-size: 26rpx;
}
.tabbar-item.active {
	color: #ff8c1a;
}
.tabbar-item image {
	width: 48rpx;
	height: 48rpx;
}
.tabbar-warning {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;
	z-index: 2;
}
.warning-icon {
	width: 90rpx;
	height: 90rpx;
	margin-top: -40rpx;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2rpx 8rpx #eee;
}
</style>
